<script setup lang="ts">
import {defineAsyncComponent, reactive, ref} from "vue";
import {ElMessage, TabsPaneContext, UploadProps} from "element-plus";
import {getUserList, postUserMessage} from "/@/api/api";
const action = import.meta.env.VITE_API_URL + '/util/file/oss/single'
const emit = defineEmits(['showFalse'])
const data = reactive({
  tabIndex: 0,
  dialogTableVisible: false,
  page: {
    total: 0,
    currentPage: 1,
    pageSize: 10,
  },
  idArr: [],
  dataList: [],
  option: {
    index: false,
    selection:true,
    menu:false,
    // searchLabelWidth: 65,
    addBtn: false,
    printBtn: false,
    excelBtn: false,
    // searchSpan: 5,
    searchMenuSpan: 12,
    border: true,
    viewBtn: false,
    editBtn: false,
    delBtn: false,
    align: 'center',
    // emptyBtnText: '重置',
    emptyBtnIcon: 'el-icon-close',
    column: [
      {
        label: 'Name',
        prop: 'firstName',
        searchSpan: 12,
        search: true,
      },
      {
        label: 'Phone',
        prop: 'userPhone',
        searchSpan: 12,
        search: true,
      },
    ]
  },
  pageData: {},
  formSearch:{
    userPhone: '',
  }
})
const show = (row:any) => {
  data.pageData = row
  data.dialogTableVisible = true
}
const editSubmission = () => {
  console.log(data.pageData)
  console.log(data.idArr)
  let ids: any[] = []
  data.idArr.forEach((item:any) => {
    ids.push(item.userId)
  })
  let obj = {
    userId: ids,
    messageContent: data.pageData.messageContent,
    messageHeadline: data.pageData.messageHeadline,
    messageImg: data.pageData.messageImg,
    skipUrl: data.skipUrl
  }
  postUserMessage(obj).then((res:any) => {
    if (res.code === 200) {
      ElMessage.success('Success')
      data.dialogTableVisible = false
      emit('showFalse')
    }
  })
}
const CourseListPage = (item:object = {}) => {
  let index = data.tabIndex
  let page = {
    ...item,
    pageIndex: data.page.currentPage,
    pageSize: data.page.pageSize,
  }
  getUserList(page).then((res:any) => {
    if (res.code === 200) {
      data.dataList = res.data.list
      data.page.total = res.data.total
    }
  })
  
}
const onLoad = (e:any) => {
  console.log(e)
  data.page.currentPage = e.currentPage
  data.page.pageSize = e.pageSize
  CourseListPage()
}
const resetChange = (item:any) => {
  CourseListPage()
}
const refreshChange = (index: number) => {
  CourseListPage()
}
const searchChange = (params: any, done: any) => {
  done()
  CourseListPage({
    userNickname: params.userNickname,
    userPhone: data.formSearch.userPhone,
  })
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
  console.log(tab.props.name)
  data.tabIndex = tab.props.name
  data.idArr = []
  CourseListPage({}, data.tabIndex)
}
const selectionChange = (list:any) => {
  console.log(list)
  data.idArr = list
}
const formatPhoneNumber = (phoneNumber:any) => {
  const cleanedInput = phoneNumber.replace(/[^0-9]/g, '');
  if (cleanedInput.length !== 10) {
    return phoneNumber;
  }

  const formattedNumber = `${cleanedInput.slice(0, 3)}-${cleanedInput.slice(3, 6)}-${cleanedInput.slice(6)}`;
  return formattedNumber;
}
defineExpose({
  data,
  show
})
</script>

<template>
  <div>
    <el-dialog v-model="data.dialogTableVisible" :align-center="true" title="Send a message">
      <avue-crud v-model:page="data.page" :data="data.dataList" :option="data.option" 
                 @on-load="onLoad" @search-reset="resetChange" @refresh-change="refreshChange"
                 @search-change="searchChange"
                 @selection-change="selectionChange">
        <template #userPhone-search="{disabled,size}">
          <el-input
              v-model="data.formSearch.userPhone"
              placeholder="Please enter a phone number"
              :maxlength="12"
              :formatter="(value) => (value ? formatPhoneNumber(value) : '')"
          />
        </template>
      </avue-crud>
      <template #footer>
        <el-button type="primary" @click="editSubmission">Send</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.el-tab-pane {
  display: none;
}
</style>
